<template>
    <!-- echarts 初始化 -->
    <div id="content" style="width: 1052px; height: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
import china from '@/utils/china.json'

export default {
  props: {
  },
  mounted() {
    let myChart = echarts.init(document.getElementById("content"));
    // console.log(myChart)
    echarts.registerMap('china', china);
    let option = {
      series: [
        {
          type: "map",
          map: "china", // 引入地图数据
          name: "省份环境情况",
          data: [
            {
              name: "北京市",
              value: 4,
            },
            {
              name: "天津市",
              value: 4,
            },
            {
              name: "上海市",
              value: 3,
            },
            {
              name: "重庆市",
              value: 5,
            },
            {
              name: "河北省",
              value: 6,
            },
            {
              name: "河南省",
              value: 6,
            },
            {
              name: "云南省",
              value: 2,
            },
            {
              name: "辽宁省",
              value: 2,
            },
            {
              name: "黑龙江省",
              value: 2,
            },
            {
              name: "湖南省",
              value: 4,
            },
            {
              name: "安徽省",
              value: 4,
            },
            {
              name: "山东省",
              value: 5,
            },
            {
              name: "新疆维吾尔自治区",
              value: 1,
            },
            {
              name: "江苏省",
              value: 5,
            },
            {
              name: "浙江省",
              value: 4,
            },
            {
              name: "江西省",
              value: 3,
            },
            {
              name: "湖北省",
              value: 3,
            },
            {
              name: "广西壮族自治区",
              value: 2,
            },
            {
              name: "甘肃省",
              value: 4,
            },
            {
              name: "山西省",
              value: 4,
            },
            {
              name: "内蒙古自治区",
              value: 1,
            },
            {
              name: "陕西省",
              value: 4,
            },
            {
              name: "吉林省",
              value: 3,
            },
            {
              name: "福建省",
              value: 5,
            },
            {
              name: "贵州省",
              value: 4,
            },
            {
              name: "广东省",
              value: 4,
            },
            {
              name: "青海省",
              value: 4,
            },
            {
              name: "西藏自治区",
              value: 1,
            },
            {
              name: "四川省",
              value: 5,
            },
            {
              name: "宁夏回族自治区",
              value: 2,
            },
            {
              name: "海南省",
              value: 2,
            },
            {
              name: "台湾省",
              value: 3,
            },
            {
              name: "香港特别行政区",
              value: 3,
            },
            {
              name: "澳门特别行政区",
              value: 3,
            },
          ],
        },
      ],
      tooltip: {
        trigger: "item",
      },

      visualMap: {
        left: "right",
        min: 1,
        max: 6,
        inRange: {
          color: [
            "#02E300",
            "#FFFF00",
            "#FF7E00",
            "#FE0000",
            "#980048",
            "#7E0123",
          ],
        },
        text: ["High", "Low"],
        calculable: true,
      },

    };
    myChart.setOption(option);

    myChart.on("click", (params) =>
        this.$emit("toProvince", { fileName: params.name })
    );

  },

};
</script>
<style lang="less" scoped>

</style>
